<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="8" :lg="7" :md="8" :sm="24">
            <a-form-item label="1钻石=">
              <a-input placeholder="请输入" style="width: 70%" v-model="IntegralNum"></a-input> 积分
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="submitForm">确认修改</a-button>
              <span style="margin-left: 20px;color: #9e9e9e">该换算规则将用于产生钻石收益时，积分收益的换算</span>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <a-tabs default-active-key="4" @change="tabChange">
      <a-tab-pane key="4" tab="赠送积分套餐">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <Give-Integral-List ref="GiveIntegralList"></Give-Integral-List>
        </div>
      </a-tab-pane>
      <a-tab-pane key="1" tab="积分兑换文字条数">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button @click="add" type="primary" icon="plus">新增兑换套餐</a-button>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="积分兑换语音时长">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button @click="add" type="primary" icon="plus">新增兑换套餐</a-button>
        </div>
      </a-tab-pane>
      <a-tab-pane key="3" tab="积分兑换视频时长">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button @click="add" type="primary" icon="plus">新增兑换套餐</a-button>
        </div>
      </a-tab-pane>
    </a-tabs>

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        v-if="clickType!='4'"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange">
        <template slot="imgSlot" slot-scope="text,record">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </span>

      </a-table>
    </div>

    <integral-settings-modal ref="modalForm" @ok="modalFormOk"></integral-settings-modal>
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import IntegralSettingsModal from './modules/IntegralSettingsModal'
  import { httpAction, getAction } from '@/api/manage'
  import GiveIntegralList from '../giveintegral/GiveIntegralList'

  export default {
    name: 'IntegralSettingsList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      IntegralSettingsModal,
      GiveIntegralList
    },
    data () {
      return {
        description: '积分设置管理页面',
        columns:[],
        // 表头
        jfColumns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'赠送积分',
            align:"center",
            dataIndex: 'name'
          },
          {
            title:'销量',
            align:"center",
            dataIndex: 'videoDiscount'
          },
          {
            title:'创建时间',
            align:"center",
            dataIndex: 'createTime'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 表头
        dhColumns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'商品图片',
            align:"center",
            dataIndex: 'productImg',
            scopedSlots: {customRender: 'imgSlot'}
          },
          {
            title:'套餐名称',
            align:"center",
            dataIndex: 'name'
          },
          {
            title:'兑换文字条数(条)',
            align:"center",
            dataIndex: 'number'
          },
          {
            title:'单价(积分)',
            align:"center",
            dataIndex: 'price'
          },
          {
            title:'商品详情',
            align:"center",
            dataIndex: 'detail'
          },
          {
            title:'销量',
            align:"center",
            dataIndex: 'videoDiscount'
          },
          {
            title:'创建时间',
            align:"center",
            dataIndex: 'createTime'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/system/integralSettings/list",
          delete: "/system/integralSettings/delete",
          deleteBatch: "/system/integralSettings/deleteBatch",
          exportXlsUrl: "/system/integralSettings/exportXls",
          importExcelUrl: "system/integralSettings/importExcel",

        },
        dictOptions:{},
        superFieldList:[],

        clickType:"4",
        disableMixinCreated:true,
        IntegralNum:"",
      }
    },
    created() {
      this.getSuperFieldList();
      this.columns=this.jfColumns;
      this.initData();
      this.getSystemConfigMap();
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      initDictConfig(){
      },
      getSuperFieldList(){
        let fieldList=[];
        fieldList.push({type:'string',value:'name',text:'套餐名称',dictCode:''})
        fieldList.push({type:'string',value:'number',text:'兑换文字条数',dictCode:''})
        fieldList.push({type:'string',value:'price',text:'单价(积分)',dictCode:''})
        fieldList.push({type:'string',value:'detail',text:'商品详情',dictCode:''})
        fieldList.push({type:'int',value:'videoDiscount',text:'销量',dictCode:''})
        this.superFieldList = fieldList
      },

      //初始化数据
      initData(){
        //this.queryParam.msgType=this.clickType;
        //this.loadData(1);
      },

      //tab切换
      tabChange(key){
        this.clickType=key;
        if(key==4){
          this.columns=this.jfColumns;
        }else if(key==1){
          this.columns=this.dhColumns;
          this.columns[2].title="兑换文字条数(条)"
          this.queryParam.type=this.clickType;
          this.loadData(1);
        }else if(key==2){
          this.columns=this.dhColumns;
          this.columns[2].title="兑换通话时长(分钟)"
          this.queryParam.type=this.clickType;
          this.loadData(1);
        }else if(key==3){
          this.columns=this.dhColumns;
          this.columns[2].title="兑换通话时长(分钟)"
          this.queryParam.type=this.clickType;
          this.loadData(1);
        }
      },

      //新增界面
      add() {
        this.$refs.modalForm.add(this.queryParam);
        this.$refs.modalForm.disableSubmit = false;
      },

      //获取回显数据
      getSystemConfigMap(){
        getAction('/system/systemConfig/getSystemConfigMap').then((res)=>{
          if(res.success){
            this.IntegralNum=res.result.IntegralNum;
          }
        })
      },
      //保存数据
      submitForm () {
        const that = this;
        // 触发表单验证
        if (this.IntegralNum) {
          that.confirmLoading = true;
          let httpurl = '/system/systemConfig/saveOrUpdate';
          let method = 'post';
          let dataList=[];
          let obj={};
          obj.code="IntegralNum";
          obj.value=this.IntegralNum;
          obj.title="1钻石=多少积分";
          dataList.push(obj)

          httpAction(httpurl,dataList,method).then((res)=>{
            if(res.success){
              that.$message.success(res.message);
            }else{
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
          })
        }else {
          this.$message.warning("请填写1钻石=多少积分");
        }
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>